<template>
	<div>
		<!--顶部样式-->
		<div class="head-bg">
			<div class="head-black">
				<div class="left-arrow">
					<img src="../../assets/img/gerenzhongxin/gongzhonghao/left-arrow.png" />
				</div>
				<div class="head-center">
					<p>设置</p>
				</div>
				<div class="head-right">
					<p>速度</p>
				</div>
			</div>
		</div>
		<!--具体内容-->
		<ul class="shezhi-content">
			<li>
				
					<div class="sz1">
						<p class="zhanghu">账户管理</p>
						<p class="right-arrow">></p>
					</div>
		
			</li>
			<li>
				<a href="#/shezhi03">
					<div class="sz2">
						<p class="zhanghu">修改登录密码</p>
						<p class="right-arrow">></p>
					</div>
				</a>
			</li>
			<li>
				<div class="sz3">
					<p class="zhanghu">清除缓存</p>
					<p class="right-arrow shikb">10KB</p>
				</div>
			</li>
			<li>
				<div class="sz4">
					<p class="zhanghu">阿拉灯平台用户协议</p>
					<p class="right-arrow">></p>
				</div>
			</li>
			<li>
				<div class="sz5">
					<p class="zhanghu">个人委托协议</p>
					<p class="right-arrow">></p>
				</div>
			</li>
			<li>
				<div class="sz6">
					<p class="zhanghu">检查更新</p>
					<p class="right-arrow">></p>
				</div>
			</li>
		</ul>
		<!--账户管理-->
		<div class="guanli">
			<img src="../../assets/img/gerenzhongxin/gongzhonghao/shouj.png"/>
			<p>手机号:&nbsp;18888888888</p>
		</div>
		<!--检查更新-->
		<div class="jiancha">
			<p>已是最新版本...</p>
		</div>
		<!--清除缓存-->
		<div class="qingchu">
			<div class="clear"></div>
			<div class="clear-content">
				<p class="one">确认清除缓存?</p>
				<p class="two">取消</p>
				<p class="three">确认</p>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		components: {},
		methods: {
			gengxin: function() {
				
				$(".sz6").click(function() {
					$(".jiancha").css("opacity",1);
					setTimeout(function(){
						$(".jiancha").css("opacity",0);	
					},1000);
				});
				$(".sz3").click(function() {
					$(".qingchu").css("display", "block");
				});
				$(".three").click(function() {
					$(".qingchu").css("display", "none");
					//$(".shikb").text("0KB");
					$(".shikb").html("0KB");
				});
				$(".sz1").click(function(){
					$(".shezhi-content").hide();
					$(".guanli").show();
					
				});
				$(".left-arrow").click(function(){
					$(".guanli").hide();
					$(".shezhi-content").show();
				});
			}
		},
		mounted: function() {
			this.gengxin();
		}
	}
</script>

<style>
	html {
		background: #f2f2f2;
	}
	.guanli{
		display: none;
	}
	#app {
		overflow: hidden;
	}
	
	.head-bg {
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
	}
	
	.shezhi-content {
		border: 0.1rem solid darkgray;
	}
	
	.head-black {
		margin: 0 auto;
		padding-top: 3.1rem;
		display: flex;
		justify-content: space-between;
		width: 95%;
	}
	
	.left-arrow img {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	.head-center {
		font-size: 3.4rem;
		color: white;
	}
	
	.head-right {
		opacity: 0;
	}
	
	.shezhi-content {
		width: 100%;
		height: 60.5rem;
		background: white;
	}
	
	.shezhi-content li {
		height: 10rem;
		margin: 0 auto;
		border: 0.1rem solid gainsboro;
	}
	
	.sz1,
	.sz2,
	.sz3,
	.sz4,
	.sz5,
	.sz6 {
		margin: 0 auto;
		width: 95%;
		display: flex;
		justify-content: space-between;
	}
	
	.zhanghu {
		font-size: 3rem;
		line-height: 10rem;
		color: black;
	}
	
	.right-arrow {
		font-size: 2.5rem;
		line-height: 10rem;
	}
	
	.jiancha {
		opacity: 0;
		margin: 5rem auto;
		width: 30rem;
		background: gray;
	}
	
	.jiancha p {
		font-size: 3rem;
		color: white;
		padding: 2rem;
	}
	
	.clear {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: black;
		opacity: 0.3;
	}
	
	.clear-content {
		position: absolute;
		left: 16rem;
		top: 42rem;
		width: 40rem;
		height: 25rem;
		background: white;
	}
	
	.clear-content .one {
		font-size: 3rem;
		padding: 7rem;
		border-bottom: 0.1rem solid darkgray;
	}
	
	.clear-content .two {
		font-size: 3rem;
		float: left;
		width: 20rem;
		line-height: 7rem;
	}
	
	.clear-content .three {
		font-size: 3rem;
		float: left;
		width: 20rem;
		line-height: 7rem;
		color: red;
	}
	.qingchu{
		display: none;
	}
	.guanli{
		width: 100%;
		height: 10rem;
		background: white;
		}
	.guanli img{
		width: 2.5rem;
		float: left;
		margin-left: 2rem;
		padding-top: 3rem;
	}
	.guanli p{
		margin-left: 2rem;
		float: left;
		font-size: 2.8rem;
		padding-top: 3rem;
	}
</style>